<template>
 <div style="height:100%">
  <div style="display: flex; flex-flow:column nowrap;align-items: center;height:100%">
    <div class="borderWithRadius" style="width: 98%;background-color: white;margin:10px 0;padding-bottom:20px">

        <div style="padding:20px"><span style="font-weight:bold;">{{ecuName}}-基本信息</span></div>
        <div style="font-size:11pt">
          <a-row :gutter="[9,30]" type="flex" justify="center">
            <a-col :span=3><b>ECU ID:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuModuleId || '-' "></table-ellipsis></a-col>
            <a-col :span=3><b>诊断ID:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.ecuDiaId || '-' "></table-ellipsis></a-col>
            <a-col :span=4><b>硬件版本号:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.hardVersion || '-' "></table-ellipsis></a-col>
            <a-col :span=5><b>升级目标版本:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.targetVersion || '-' "></table-ellipsis></a-col>
            <a-col :span=4><b>配置文件版本时间:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="$commonFun.getDateTimeStr(ecuDetail.createTime) || '-' "></table-ellipsis></a-col>
            <a-col :span=3><b>配置文件原始版本:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.configSourceVersion || '-' "></table-ellipsis></a-col>
          </a-row>
          <a-row :gutter="[9,30]" type="flex" justify="center">
            <a-col :span=3><b>配置文件DID:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.ecuConfigDiaId || '-' "></table-ellipsis></a-col>
            <a-col :span=3><b>子诊断ID:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.ecuDid || '-' "></table-ellipsis></a-col>
            <a-col :span=4><b>装配类型:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuType || '-' "></table-ellipsis></a-col>
            <a-col :span=5><b>升级原始版本:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.sourceVersion || '-' "></table-ellipsis></a-col>
            <a-col :span=4><b>配置文件软件编码:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.configSoftwareCode || '-' "></table-ellipsis></a-col>
            <a-col :span=3><b>配置文件目标版本:</b> <table-ellipsis :tableEllipsisIsTurnLine="true" :text="ecuDetail.configTargetVersion || '-' "></table-ellipsis></a-col>
          </a-row>
        </div>
    </div>
    <div  class="borderWithRadius" style="width: 98%;background-color: white;flex:1;margin-bottom:10px">
        <div style="padding:20px"><span style="font-weight:bold;">升级信息</span></div>
        <div class="ecuUpdateDetailTable" style="height:calc(100% - 100px)">
                  <s-table
                    class="h100"
                    :columns="columns"
                    :data-source="levelLists"
                    :loading="loadingLevelLists"
                    :showPagination="false"
                    rowKey="id"
                  >
                    <template
                      #updateLevel="text, record"
                    ><table-ellipsis :text="getUpdateLevel(record.operationType)"></table-ellipsis
                    ></template>
                    <template
                      #updateState="text, record"
                    ><table-ellipsis :text="taskOperationTypeDictCodeObj[record.operationType] || '-'"></table-ellipsis
                    ></template>
                    <template
                      #reportingTime="text"
                    ><table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis
                    ></template>
                    <template #installTime="text,record">
                      <table-ellipsis v-if="record.ecuReprogramWay=='a/b'" :text="$commonFun.formatSeconds(Number(text)+Number(record.ecuPreflashTime)) || '-'"></table-ellipsis>
                      <table-ellipsis v-else :text="$commonFun.formatSeconds(text) || '-'"></table-ellipsis>
                    </template>
                    <template #message="text"><table-ellipsis :text="text || '-'"></table-ellipsis></template>
                    <template #packageType="text"><table-ellipsis :text="getPackageTypeName(text)"></table-ellipsis></template>
                    <template slot="operation" slot-scope="text, record">
                             <auth-text
                                  @click="downLoadLog(record)"
                                  :auth="statisticsPerms.monitor.ecuxqLogDownload"
                                  >下载请求参数日志</auth-text>
                    </template>
                  </s-table>
                </div>
    </div>


 </div>
 </div>

</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { updateJdTbColumns } from './config/list'
import taskApi from '@/api/modules/task'
import { downloadBlobFile } from '@/utils/functions'
import moment from 'moment'
import { statisticsPerms } from '@/config/permission/index'
import AuthText from '@/components/AuthText'


export default {
  components: {
    TableEllipsis,
    STable,
    FullParentDomWithDask,
    AuthText

  },
  props: {
    loadingEcuLists: {
      type: Boolean,
      default: false
    },
    ecuLists: {
      type: Array,
      default () {
        return []
      }
    },
    activeEuModuleId: {
      type: String,
      default: ''
    },
    isInitExecution: {
      type: Boolean,
      default: true
    },
    carUpgradeInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      statisticsPerms,
      statusIcons: {
        9: {
          name: 'icon-chenggong',
          title: '升级成功',
          class: 'successIcon'
        },
        2: {
          name: 'icon-jinhangzhong2',
          title: '正在升级',
          class: 'inIcon'
        },
        8: {
          name: 'icon-shibai-yin',
          title: '升级失败',
          class: 'failIcon'
        },
        3: {
          name: 'icon-weiwancheng',
          title: '未完成',
          class: 'unCompleteIcon'
        }
      },
      columns: updateJdTbColumns,
      activeTimeUpdateTbData: [{}],
      downing: false,
      query: {
        taskId: [],
        vehicleId: '',

      },
      taskId: '',
      vehicleId: '',
      vin: '',
      checkSeqNo: '',
      ecuModuleId: '',
      ecuName:'',
      ecuDetail:{
        ecuDiaId: '',
        targetVersion: '',
        configSourceVersion: '',
        ecuConfigDiaId: '',
        ecuDid: '',
        softwareCode: '',
        sourceVersion: '',
        configSoftwareCode: ''
      },
      loadingLevelLists: false,
      levelLists: [],
      ecuType: '',
      processId: ''

    }
  },
  watch: {
    carUpgradeInfo: {
      immediate: true,
      handler (val) {
        if (val.vin) {
          this.vin = val.vin
          this.ecuName = val.ecuName
          this.taskId = val.taskId
          this.vehicleId = val.vehicleId
          this.ecuModuleId = val.ecuModuleId
          this.checkSeqNo = val.checkSeqNo
          this.processId = val.processId
          // 获取ECU升级信息
          this.getTaskVehicleEcuList()
          // 获取任务车辆Ecu升级情况
          this.getLevelListsData()
        }
      }
    }
  },
  computed: {
    taskEcuUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    },
    taskOperationTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskOperationTypeDictCode')
    },
    packageTypesObj () {
      return this.$store.getters.getDictCodeObj('packageTypes')
    },
    activeEcuInfo () {
      const obj = this.ecuLists.find((ecu) => ecu.ecuModuleId === this.activeEuModuleId)
      if (!obj) {
        return {}
      }
      return obj
    }
  },
  created () {
    this.vin = this.$route.query.vin
    this.ecuName = this.$route.query.ecuName
    this.taskId = this.$route.query.taskId
    this.vehicleId = this.$route.query.vehicleId
    this.ecuModuleId = this.$route.query.ecuModuleId
    this.checkSeqNo = this.$route.query.checkSeqNo
    this.processId = this.$route.query.processId

    // this.$route.meta.title = "升级监控 / " + this.vin + "-" + this.ecuName
    if (this.isInitExecution) {
      // 获取ECU升级信息
      this.getTaskVehicleEcuList()
      // 获取任务车辆Ecu升级情况
      this.getLevelListsData()
    }
    this.getPageDictData()
  },
  methods: {
    getUpdateLevel (status) {
      status *= 1
      if (!status) {
        return '-'
      }
      if (status < 20) {
        return this.$t('checkLevel')
      }
      if (status < 40) {
        return this.$t('downLevel')
      }
      return this.$t('installLevel')
    },
    changeEcu (record) {
      this.$emit('changeecu', record.ecuModuleId)
    },
    // 下载日志
    downLoadLog (record) {
      const params = {
        vin: record.vin,
        ecuId: record.ecuId,
        acceptTime: record.acceptTime,
        operationType: record.operationType,
        traceId: record.traceId
      }
      this.downing = true
      taskApi
        .downVehicleEcuDetailLog(params)
        .then((res) => {
          const fileName =
            params.vin + '_' + params.ecuId + '_' + moment(params.acceptTime).format('YYYYMMDDHHmmss') + '.log'
          downloadBlobFile(res, fileName)
        })
        .finally(() => {
          this.downing = false
        })
    },
    getPackageTypeName (text) {
      if (text === 1) {
        return this.$t('totalPackage')
      } else if (text === 2) {
        return this.$t('differentialPackage')
      }
      return '-'
    },
    getPageDictData () {
      ;['getTaskOperationTypeDictCodeData', 'getTaskEcuUpdateDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    },
    getLevelListsData () {
      this.levelLists = []
      if (!this.ecuModuleId) {
        return
      }
      this.loadingLevelLists = true
      const params = {
        ecuModuleId: this.ecuModuleId,
        taskId: this.taskId,
        vehicleId: this.vehicleId,
        processId: this.processId
      }
      taskApi.getVehicleEcuDetail(params).then((res) => {
        this.levelLists = res.data
      }).finally(() => {
        this.loadingLevelLists = false
      })
    },
    getTaskVehicleEcuList(){
      const params = {
        ecuIds: this.ecuModuleId,
        taskIds: this.taskId,
        vehicleId: this.vehicleId
      }
      taskApi.getTaskVehicleEcuList(params).then((res) => {
        if(res.data && res.data.length > 0){
          this.ecuDetail = res.data[0]
          if(this.ecuDetail){
            if(this.ecuDetail.ecuAssembleType == 1){
               this.ecuType = '标配'
            }else if(this.ecuDetail.ecuAssembleType == 2){
               this.ecuType = '选装'
            }
          }

        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ecuUpdateDetailTable {
    max-height: 500px;
    width: 96%;
    margin-top: 15px;
    flex-flow: column nowrap;
    flex-direction: column;
    display: flex;
    margin-left: 35px;
    text-align:center;
}

.ecuUpdateDetailTable tr > th{
    max-width: 200px;
    white-space: nowrap;
    padding: 9px 16px;
    border-bottom: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    text-align: center;
}
@border: 1px solid @borderColor;
.borderWithRadius {
    border: @border;
    border-radius: @border-radius-base;
}
</style>
